<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>农村集体三资管理</title>
  <link rel="stylesheet" href="../frame/layui/css/layui.css">
</head>

<body style="height: 700px;">
    <div>
      <!-- 内容主体区域 -->
      <div style="padding: 15px; text-align: center;" >
        <div class="layui-row layui-font-20">
          <h1>项目进度管理</h1>
          <hr />
          <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>


      </div>

    </div>
  <script src="../frame/layui/layui.js"></script>

  <script>
    //***重点***：需要把使用到的layui组件table和element都引用进来
    layui.use(['table', 'element'], function () {
      var table = layui.table;
      var element = layui.element;

      table.render({
        elem: '#test'
        , url: 'http://localhost:8080/evaluate'
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        //,data: []   //也可以不用url改为使用data直接传数据
        // ,autoSort: false //取消自动排序
        , cols: [
          [
            // {field:'id', title: 'ID', align: 'center',sort: true}
            { field: 'theprojectname', title: '工程名称', align: 'center', sort: true }

            , { field: 'name', title: '负责人', align: 'center', sort: true }
            // 通过项目进度值拼接element组件中的进度条
            , {
              field: 'projrctprocess', title: '项目进度', align: 'center', sort: true, templet: function (d) {
                //***重点***：判断颜色
              console.log(d.projrctprocess);
                var ys = '';
                if (30 < d.projrctprocess && d.projrctprocess < 100) {
                  ys = 'layui-bg-orange'
                } else if (0 < d.projrctprocess && d.projrctprocess <= 30) {
                  ys = 'layui-bg-red'
                }
                //***重点***：拼接进度条
                return '<div class="layui-progress layui-progress-big" lay-showpercent="true"><div class="layui-progress-bar ' + ys + '" lay-percent="' + d.projrctprocess + '%"></div></div><br>'
              }
            }

          ]
        ]
        ,page:true
        //***重点***：***重点***：***重点***：如果没有这一步，进度条是不会生效的。应为table渲染之后没有渲染element
        , done: function (res, currentCount) {
          //***重点***：table渲染完成后渲染element进度条
          element.render()
        }
      });


    });

  </script>


</body>

</html>